/**
 *  弹窗
 * @author xiaoxujs
 */

import { FC, useCallback, useEffect, useRef, useState } from "react";
import { ISyhtConnectionSettingParams, ISyhtSonnectionQuery } from "../../../../../type/ConfigManagement/DeviceLinkSettings/api";
import { FormBox, FormItemBox, ModalBox } from "./style";
import { Switch } from "antd";
import InputX from "../../../../../components/InputX";
import { ButtonX } from "../../../../../components/UiManagement";
import { postSyhtConnectionSetting } from "../../../../../api/ConfigManagement/DeviceLinkSettingsApi";

const SetModule: FC<{
    open: boolean,
    onClose: () => void, // 关闭弹窗
    changeData?: ISyhtSonnectionQuery  // 修改的数据
}> = ({
    open,
    onClose,
    changeData
}) => {

        const ModuleBoxRef = useRef<HTMLDivElement>(null); // 弹窗的ref 外层
        const moduleBoxContentRef = useRef<HTMLDivElement>(null); // 弹窗的ref 内层

        const [serviceStatus, setServiceStatus] = useState(false); // 服务状态
        const [plcHost, setPlcHost] = useState<string>(''); // 下位机IP地址
        const [byteSize, setByteSize] = useState<string>(''); // 上位机单次处理字节数
        const [hmiPort, setHmiPort] = useState<string>(''); // 上位机端口号
        const [plcPort, setPlcPort] = useState<string>(''); // 下位机端口号

        // 点击取消按钮
        const handleCancel = useCallback(
            () => {
                setServiceStatus(false); // 服务状态
                setPlcHost(''); // 下位机IP地址
                setByteSize(''); // 上位机单次处理字节数
                setHmiPort(''); // 上位机端口号
                setPlcPort(''); // 下位机端口号
            },
            [],
        )

        useEffect(() => {

            if (ModuleBoxRef.current && moduleBoxContentRef.current) {

                ModuleBoxRef.current.addEventListener('click', (event: any) => {
                    if (moduleBoxContentRef.current?.contains(event.target as Node)) {

                    } else {
                        handleCancel();
                        onClose();
                    }
                })
            }
        }, [handleCancel, onClose])
        
        // 回显
        useEffect(() => {
            if (changeData) { // 修改的数据
                setServiceStatus(changeData.serviceStatus); // 服务状态
                setPlcHost(changeData.plcHost); // 下位机IP地址
                setByteSize(changeData.byteSize); // 上位机单次处理字节数
                setHmiPort(changeData.hmiPort); // 上位机端口号
                setPlcPort(changeData.plcPort); // 下位机端口号
            }
        }, [changeData])

        // 点击确定按钮
        const handleSumber = async () => {
            // 
            if (plcHost === '') {
                alert('下位机IP地址不能为空')
                return
            }
            if (byteSize === '') {
                alert('上位机单次处理字节数不能为空')
                return
            }
            if (hmiPort === '') {
                alert('上位机端口号不能为空')
                return
            }
            if (plcPort === '') {
                alert('下位机端口号不能为空')
                return
            }
            if (changeData) { // 修改的数据
                const params: ISyhtConnectionSettingParams = {
                    serviceStatus: serviceStatus, // 服务状态
                    plcHost: plcHost, // 下位机IP地址
                    byteSize: byteSize, // 上位机单次处理字节数
                    hmiPort: hmiPort, // 上位机端口号
                    plcPort: plcPort, // 下位机端口号
                }
                const { code, msg } = await postSyhtConnectionSetting(params) as { code: number, msg: string }; // 修改
                if (code === 200) {
                    alert('设置成功')
                    handleCancel(); // 清空数据
                    onClose(); // 关闭弹窗 
                } else {
                    alert(msg)
                }
            }
        }


        return <ModalBox ref={ModuleBoxRef} open={open}>
            <div ref={moduleBoxContentRef} className="modal-content" >
                <div className="modal-header">
                    <div className="modal-title">设置状态信息</div>
                    <span className="guanbi" aria-hidden="true" onClick={() => {
                        handleCancel()
                        onClose();
                    }}>&times;</span>
                </div>
                <div className="modal-body">
                    <FormBox>
                        <FormItemBox>
                            <div className="form_title_box">上位机服务</div>
                            <Switch checked={serviceStatus} onChange={(e) => setServiceStatus(e)} />
                        </FormItemBox>
                        <FormItemBox>
                            <div className="form_title_box">下位机IP地址</div>
                            <InputX value={plcHost} onChange={(value) => setPlcHost(value)} />
                        </FormItemBox>
                        <FormItemBox>
                            <div className="form_title_box">单次处理字节数</div>
                            <InputX value={byteSize} onChange={(value) => setByteSize(value)} />
                        </FormItemBox>
                        <FormItemBox>
                            <div className="form_title_box">上位机端口号</div>
                            <InputX value={hmiPort} onChange={(value) => setHmiPort(value)} />
                        </FormItemBox>
                        <FormItemBox>
                            <div className="form_title_box">下位机端口号</div>
                            <InputX value={plcPort} onChange={(value) => setPlcPort(value)} />
                        </FormItemBox>
                    </FormBox>
                </div>
                <div className="modal-footer">
                    <div style={{ marginRight: '2rem' }}>
                        <ButtonX type="info" onClick={() => {
                            handleCancel()
                            onClose();
                        }}>取消</ButtonX>
                    </div>
                    <ButtonX type='primary' onClick={() => handleSumber()}>确定</ButtonX>
                </div>
            </div>
        </ModalBox>
    }

export default SetModule;